<template>
  <div>
    <div class="tow_engine_box">
      <div class="center">
        <div class="tow_engine_header">
          <div>基于人机融合的财报分析双引擎</div>
          <div>智能双引擎 财务分析反粉饰</div>
        </div>
        <div class="tow_engine_center">
          <div
            class="tow_engine_center_l"
        
          >
            <div
              class="tow_engine_center_l_title magictime"
              
            >
              专家规则引擎（人）
            </div>
            <div
              style="height: 100%;display: none;"
              
              alt=""
            >
              <div class="tow_engine_center_I_left">
                <div class="dec_box">
                  <div class="dec_box_title">人工智能引擎（机）</div>
                  <div class="dec_box_dec">
                    <span class="pointer"></span
                    ><span>
                      通过机器学习分析近30万份财务报表，并建立分析预测模型</span
                    >
                  </div>
                  <div class="dec_box_dec">
                    <span class="pointer"></span
                    ><span
                      >提供分层次机器分析结果，即包括财务粉饰程度描述，还有财务健康风险等级划分</span
                    >
                  </div>
                  <div class="dec_box_dec">
                    <span class="pointer"></span
                    ><span>
                      系统自动生成审计小结，高度总结和浓缩审计小结，高度总结和浓缩审计要点及后续稽查方向</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="tow_engine_center_r"
          
          >
            <div
              class="tow_engine_center_r_title magictime"
           
            >
              人工智能引擎（机）
            </div>
            <div
              style="height: 100%; display: none;"
              
            >
              <div :class="['tow_engine_center_A_right ']">
                <div class="dec_box">
                  <div class="dec_box_title" style="text-indent: 1.9rem;">
                    专家规则引擎（人）
                  </div>
                  <div class="dec_box_dec">
                    <span class="pointer" style="left: 1.54rem;"></span
                    ><span style="padding-right: 0.8rem;padding-left: 1.8rem;"
                      >结合国内顶级财经院校教授和著名会计事务所合伙人的研究和实践</span
                    >
                  </div>
                  <div class="dec_box_dec">
                    <span class="pointer" style="left: 1.54rem;"></span
                    ><span style="padding-right: 0.8rem;padding-left: 1.8rem;">
                      基于国际财务舞弊审计准则及国内财务审计原则，总结了五大审计入口和19种舞弊手法</span
                    >
                  </div>
                  <div class="dec_box_dec">
                    <span class="pointer" style="left: 1.54rem;"></span
                    ><span style="padding-right: 0.8rem;padding-left: 1.8rem;"
                      >利用行业和财务附注等表外大数据，实现交叉验证和分析</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tow_engine_center_c">
            <div class="tow_engine_center_c_title">
              智能双引擎
            </div>
          </div>
          <div></div>
        </div>
      </div>
    </div>
    <div style="text-align:center">
        <div  @click="$store.commit('jumpURL', '立即注册试用')" style="    margin: 0.2rem auto;
    border: 2px solid green;
    font-size: 0.41rem;
    width: auto;
    display: inline-block;
    padding: 0.1rem;
    border-radius: 9px;
    cursor:pointer;
    ">
            立即注册试用
        </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "productCenterArea",
  dec: "产品中心区域",
  data() {
    return {
      rightMove: false,
      leftMove: false
    };
  },
  mounted() {},
  methods: {
    rightMoveInit() {
      this.rightMove = !this.rightMove;
    },

    leftMoveInint() {
      this.leftMove = !this.leftMove;
    }
  }
};
</script>
<style lang="less">
.dec_box{
  overflow: hidden;
  .dec_box_title{
    margin: 0.51rem auto;
    font-weight:bold;
    color:rgba(255,255,255,1);
     font-size:0.30rem;
     text-indent:  1.4rem;
     
  }
  .dec_box_dec{
   
    font-size:0.16rem;
    font-weight:500;
    color:rgba(255,255,255,1);
    position: relative;
    letter-spacing:1px;
    margin: 0.2rem;
    overflow: hidden;
    .pointer{
      position: absolute;
      width: 0.12rem;
      height: 0.12rem;
      background: #fff;
      left: 1.04rem;
    
      top: 0.06rem;
    
      border-radius: 50%;
    }
    >span:nth-child(2){

      float: left;
      padding-right: 1.2rem;
      padding-left: 1.4rem;
    }
  }
}
.center {
  margin: 0 auto;
  width: 12rem;
}
.tow_engine_box {
  // height: 7.81rem;
  padding-top: 0.79rem;
  // padding-bottom: 0.45rem;
 
}
.tow_engine_header div {
  text-align: center;

}
.tow_engine_header div:nth-child(1) {
  font-size: 0.41rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(52, 53, 63, 1);
}
.tow_engine_header div:nth-child(2) {
  font-size: 0.26rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(106, 107, 117, 1);
}
.tow_engine_center {
  width: 100%;

  margin-top: 0.35rem;
  height: 4.22rem;
  overflow: hidden;
  position: relative;
  .tow_engine_center_l{
    position: absolute;
    left: 0;
    top: 0;
    width: 54%;
    height: 100%;
    background: url('/static/img/A.png') no-repeat;
    background-size: 100% 100%;
    .tow_engine_center_l_title{
            font-size:0.34rem;
        
            font-weight:bold;
            color:rgba(255,255,255,1);
            position: absolute;
            top: 50%;
            left: 0.89rem;
            transform: translateY(-50%);
        
         }
          .tow_engine_center_I_left{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
              left:-9%;
             
              top: 0;
              transform: skewX(-14deg);
             background:rgba(4,53,116,0.9);
              >.dec_box{
                  position: absolute;
                  left: 0;
                  top: 0;
                  z-index: 10;
                  width: 100%;
                  height: 100%;
               
                  transform: skewX(14deg);
                }
          }
    
  }
  .tow_engine_center_r{
    position: absolute;
    right: 0;
    top: 0;
    width: 54%;
    height: 100%;
    background: url('/static/img/I.png') no-repeat;
    background-size: 100% 100%;
    .tow_engine_center_A_right {
          transform: skewX(-14deg);
         background: rgba(4, 53, 116, 0.9);
           right:-9%;
           position: absolute;
           width: 100%;
           height: 100%;;
           >.dec_box{
              transform: skewX(14deg);
           }
    }
         .tow_engine_center_r_title{
            font-size:0.34rem;
        
            font-weight:bold;
            color:rgba(255,255,255,1);
            position: absolute;
            top: 50%;
            right: 0.89rem;
            transform: translateY(-50%);
        
         }
  }
  .tow_engine_center_c{
    position: absolute;
    width: 2.83rem;
    height: 2.83rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('/static/img/tow_engine_center_c.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .tow_engine_center_c_title{
       font-size:0.34rem;
        
            font-weight:bold;
            color:rgba(255,255,255,1);
           
            
    }
    
  }

}

.tow_engine_center .tow_engine_center_I{
  position: absolute;
  width: 50%;
  z-index: 1;
  left: 0;
  height: 100%;
  opacity: 0.5;
  

}
.tow_engine_center .tow_engine_center_A{
  position: absolute;
  width: 50%;
  z-index: 1;
  right: 0;
  height: 100%;
  opacity: 0.5;

}

.tow_engine_center .tow_engine_center_A_right_move{
  right: 0;
}

.tow_engine_center  .tow_engine_center_I_left_move{
  left: 0;
}
.tow_engine_end {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 0.65rem;
  height: 100%;
}
.tow_engine_end > div {
  width: 2.58rem;
  height: 0.87rem;
  border-radius: 0.06rem;
  border: 0.01rem solid rgba(106, 107, 117, 1);
  color: rgba(106, 107, 117, 1);
  font-size: 0.24rem;
  text-align: center;
  line-height: 0.87rem;
}
</style>
